<template>
  <div class="carousel">
    <div class="carousel-inner">
      <div v-for="(pic, index) in picList"
           :key="index"
           class="carousel-item"
           :class="{ active: currentIndex === index }">
        <img :src="pic.fileSource" :alt="pic.title">
        <div class="carousel-caption">
          <h3>{{ pic.title }}</h3>
          <p>{{ pic.content }}</p>
        </div>
      </div>
    </div>
    <button class="carousel-control carousel-prev" @click="prevSlide">❮</button>
    <button class="carousel-control carousel-next" @click="nextSlide">❯</button>
    <div class="carousel-indicators">
      <span v-for="(_, index) in props.picList"
            :key="index"
            class="carousel-dot"
            :class="{ active: currentIndex === index }"
            @click="showSlide(index)"></span>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue'
// 定义props
const props = defineProps({
  picList: {
    type: Array,
    default: [
      {
        image: 'https://picsum.photos/1200/480?random=1',
        title: '云南民俗文化园',
        description: '探索云南多彩民族文化，体验独特的民族风情，感受传统与现代的完美融合。'
      },
      {
        image: 'https://picsum.photos/1200/480?random=2',
        title: '丽江古城',
        description: '世界文化遗产，千年古城风韵，纳西族传统建筑与现代文化交相辉映。'
      },
      {
        image: 'https://picsum.photos/1200/480?random=3',
        title: '西双版纳热带雨林',
        description: '探索神秘的热带雨林生态系统，感受大自然的鬼斧神工。'
      }
    ]
  },

})

onMounted(()=>{
  console.log("  picList:",props.picList.values())
})

const currentIndex = ref(0)
let timer = null

const showSlide = (index) => {
  currentIndex.value = index
}

const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % slides.length
}

const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + slides.length) % slides.length
}

onMounted(() => {
  timer = setInterval(nextSlide, 5000)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
.carousel {
  position: relative;
  margin: 20px 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.carousel-inner {
  position: relative;
  width: 100%;
  padding-bottom: 40%;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-item.active {
  opacity: 1;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #fff;
}

.carousel-caption h3 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.9;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.carousel-dot.active {
  background: #fff;
}

@media (max-width: 768px) {
  .carousel-inner {
    padding-bottom: 56.25%;
  }
}
</style>
